<template>
<div class="after-sale ">
    <div class="flex-column flex-box-div" v-if="active === 0">
        <div class="flex-1">
            <div class="order-box">
                <div class="order-item">
                    <div class="fz-15 blod shop-name text-left">
                        <!-- {{ details.mch_name }} -->
                        退货商品
                    </div>
                    <div class="order-goods flex-center">
                        <img :src="details.img" alt="">
                        <div class="goods_msg flex-1 flex-column-space-between">
                            <div class="name van-multi-ellipsis--l2 fz-12 blod text-left">
                                {{ details.name }}
                            </div>
                            <div class="padd text-left">
                                <span class="price fz-15 blod">￥{{ details.price }}</span> <span class="fz-12">x{{ details.num }}</span>
                            </div>
                            <div class="flex-center-space-between fz-12">
                                <!-- <div ><van-icon name="location-o" />河北</div> -->
                                <!-- <van-button type="danger" size="mini" plain round hairline class="button">去支付</van-button>
                                <van-button type="" size="mini" plain round hairline class="button">查看物流</van-button> -->
                                <!-- <van-button type="danger" size="mini" plain round hairline class="button">退款/售后</van-button> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        
            <van-cell title="退款原因" is-link :value="form.reason" class="mb10 text-left" @click="show = true" />
        
            <div class="bgc-white p15 text-left">
                <h4>补充描述和凭证</h4>
                <van-field
                    v-model="form.content"
                    rows="2"
                    autosize
                    type="textarea"
                    maxlength="200"
                    placeholder="请输入留言"
                    show-word-limit
                />
                
                <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
                <van-uploader :after-read="afterRead" :fileList="form.img" @delete="deleteImg" />
            </div>
        </div>
    
        <div class="footer p10 bgc-white">
            <van-button type="danger" size="small" @click="submit"> 提交申请 </van-button>
        </div>

    </div>

    <div class="flex-column flex-box-div" v-if="active !== 0">
        <div class="text-left p20 bgc-white">
            <div class="10 bgc-white">
                <van-steps direction="vertical" :active="active" active-color="#ea251c" class="" style="background-color: #faf7fa">
                    <van-step>
                        <h4>提交申请</h4>
                    </van-step>
                    <van-step>
                        <h4>待商家处理</h4>
                    </van-step>
                    <van-step>
                        <h4>待买家寄回</h4>
                    </van-step>
                    <van-step>
                        <h4>买家已寄回</h4>
                    </van-step>
                    <van-step>
                        <h4>退款成功</h4>
                    </van-step>
                </van-steps>
            </div>
        </div>

        <div class="order-box mt10" v-if="active !== 2">
            <div class="order-item">
                <div class="fz-15 blod shop-name text-left">
                    <!-- {{ details.mch_name }} -->
                    退货商品
                </div>
                <div class="order-goods flex-center">
                    <img :src="details.img" alt="">
                    <div class="goods_msg flex-1 flex-column-space-between">
                        <div class="name van-multi-ellipsis--l2 fz-12 blod text-left">
                            {{ details.name }}
                        </div>
                        <div class="padd text-left">
                            <span class="price fz-15 blod">￥{{ details.price }}</span> <span class="fz-12">x{{ details.num }}</span>
                        </div>
                        <div class="flex-center-space-between fz-12">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 买家填写发货信息 -->
        <template v-if="active === 2">
            <div class="mt10 bgc-white text-left">
                <div class="p15">
                    <h4>退货地址</h4>
                    <div style="background-color: #F8F8F8">
                        <div class="p10 van-hairline--bottom">联系人：{{ details.mch_name || '' }}     <span class="ml10">手机：{{ details.mch_user_phone || '' }}</span> </div>
                        <div class="p10">收货地址：{{ `${details.mch_province || ''} ${details.mch_city || ''} ${details.mch_area || ''} ${details.mch_address}` }}</div>
                    </div>
                </div>
                <div class="p15">
                    <van-action-sheet v-model="logisticsShow" :actions="logisticsList" @select="onSelectlogistics" />
                    <h4>物流公司</h4>
                    <van-field v-model="logisticsForm.back_kd" placeholder="请选择物流" readonly @click="logisticsShow = true" />
                    <h4>物流单号：</h4>
                    <van-field v-model="logisticsForm.back_kd_no" placeholder="请输入物流单号" />
                </div>
                    
            </div>
    
            <div class="footer p10">
                <van-button type="danger" size="small" @click="sendSubmit" class="width-100"> 提交 </van-button>
            </div>
        </template>

        <template v-if="active === 3 || active === 4">
            <div class="bgc-white p15 text-left">
                <h4>买家退回信息</h4>
                <p class="mt10 fz-12">物流：{{ details.back_kd }}</p>
                <p class="mt10 fz-12">物流单号：{{ details.back_kd_no }}</p>
            </div>
        </template>
    </div>

</div>
</template>

<script>
export default {
    data () {
        return {
            details: {},
            actions: [{ name: '不想买了' }, { name: '拍错尺码' }, { name: '其他' }],
            show: false,

            form: {
                content: '',
                reason: '不想买了',  // 原因
                img: [
                    // { url: 'http://www.gy365.cn/uploads/image/20220816/3aed919c75bc5aa27abf9fdf5c436058.png' }
                ]
            },

            logisticsList: [], // 可选择物流列表
            logisticsShow: false,
            logisticsForm: {
                back_kd: '',
                back_kd_no: '' // 物流单号
            }
        }
    },
    computed: {
        // 订单状态
        active () {
            // <!-- is_back_status   1-待审核 2-商家同意退货 填写物流信息 3-拒绝 4-已退款 5-完成 6-买家已填写物流 -->
            if (!this.details.id || this.details.is_back === 0) return 0 // 未申请
            // 已申请
            if (this.details.is_back === 1) {
                return 1
            } else if (this.details.is_back === 2) {
                return 2
            } else if (this.details.is_back === 3) {
                return 0
            } else if (this.details.is_back === 4) { // 退款完成
                return 4
            } else if (this.details.is_back === 5) {
                return 4
            } else { // 6 买家已填写物流
                return 3
            }
        }
    },
    methods: {
        getAfterSale () {
            this.$route.query.id && this.$goods.backInfo(this.$route.query.id).then(({ data }) => {
                console.log(data)
                this.details = data.detail
                if (data.detail.is_back === 2) {
                    this.getLogisticsList()
                }
            }).catch(() => {
            })
        },
        onSelect (val) {
            this.form.reason = val.name
            this.show = false
        },
        afterRead (file) {
            let imgFile = new FormData();
            imgFile.append("file", file.file);
            this.$user.upload(imgFile).then(res => {
                this.form.img.push({ url: res.data.key })
            })
        },
        deleteImg (val, val1) {
            this.form.img.splice(val1.index, 1)
        },
        // 申请售后
        submit () {
            this.$goods.salesAfterCreate({ id: this.$route.query.id, content: this.form.content, reason: this.form.reason, img: this.form.img.map(v => v.url) }).then(() => {
                this.$toast('提交申请成功')
                this.getAfterSale()
            })
        },
        // 获取物流列表
        getLogisticsList () {
            this.$home.getHomeData('logistics').then(res => {
                const logistice = []
                Object.keys(res.data.logistics_list).forEach(key => {
                    logistice.push({ id: key, name: res.data.logistics_list[key] })
                })
                this.logisticsList = logistice
            })

        },
        // 物流选择
        onSelectlogistics (val) {
            this.logisticsForm.back_kd = val.name
            this.logisticsShow = false
        },
        sendSubmit () {
            if (this.logisticsForm.back_kd === '' || this.logisticsForm.back_kd_no === '') return this.$toast('请输入完整物流信息')
            this.$goods.salesAfterCreate({ id: this.$route.query.id, ...this.logisticsForm }).then(res => {
                this.$toast('发货信息提交成功')
                this.getAfterSale()
            })
        }
    },
    created () {
        this.getAfterSale()
    }
}
</script>

<style lang="less" scoped>
.order-box {
    margin-bottom: 10px;
    .order-item {
        background-color: #fff;
        padding: 10px 20px;
        // &:first-child {
        //     margin-top: 10px;
        // }
        .shop-name {
            padding: 0 0 10px 0;
        }
        .order-goods {
            img {
                width: 80px;
                height: 80px;
            }
            .goods_msg {
                height: 80px;
                padding-left: 10px;
            }
        }
    }
}

.order-number {
    height: 40px;
}
</style>
